<!--
 * @Date: 2022-11-21 11:38:47
 * @LastEditTime: 2023-02-09 09:52:48
 * @Description: 首页
-->
<template>
  <view
    class="page-wrap common_bg"
    :style="{
      backgroundImage: `url(${imgBaseUrl}${'/static/img/index_top_bg.png'})`
    }"
  >
    <!-- 状态栏 -->
    <view
      class="status-bar common_bg"
      :style="{
        height: `${sysConfig.statusBarHeight}px`,
        width: '100%',
        backgroundImage: `url(${imgBaseUrl}${'/static/img/index_top_bg.png'})`
      }"
    ></view>

    <view
      :style="{
        height: `${sysConfig.statusBarHeight}px`,
        width: '100%'
      }"
    ></view>

    <u-gap height="88"></u-gap>

    <view
      class="page-wrap-header common_bg"
      :style="{
        top: `${sysConfig.statusBarHeight}px`,
        backgroundImage: `url(${imgBaseUrl}${'/static/img/index_top_bg.png'})`
      }"
    >
      <!-- <view
        @click="$common.to({ url: '/package/index/search' })"
        class="input-box"
      >
        <view>请输入商品关键词</view>

        <view class="icon">
          <cimage src="/static/icon/search.png" mode="scaleToFill" />
        </view>
      </view> -->
    </view>
	
	<view class="top_wrap">
		<view class="f-l">
	<text class="btn2">入群</text>
	
	<text class="btn2">分享</text>
	<view style="clear: both;"></view></view>
	<view class="f-c">
	<text class="btn2">入魂一番</text>
	</view>
		<view class="f-r">
	<text class="btn2">通知</text>
	<text class="btn2">直播</text><view style="clear: both;"></view></view>
	</view>
<swiper
        v-if="swiperList.length > 0"
        class="banner"
        autoplay
        :circular="true"
      >
        <swiper-item v-for="(item, i) of swiperList" :key="i">
          <view @click="$common.bannerTo(item)" class="swiper-pic">
            <cimage :src="item.thumb" mode="scaleToFill" />
          </view>
        </swiper-item>
      </swiper>
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <!-- 商品分类 -->
      <template v-if="classifyList.length > 0">
	  <view class="btn_wrap">
	  <text class="btn">今日推荐</text>
	  
	  <text class="btn">新品预约</text>
	  
	  <text class="btn">折扣专区</text></view>
        <swiper @change="classChange" class="classify" :circular="false">
          <swiper-item v-for="(item, i) of cardList" :key="i">
            <view
              @click="toClassify(a)"
              v-for="(a, b) in 3"
              :key="b"
              class="item"
            >
              <view class="item-pic">
                <cimage :src="item.thumb" mode="scaleToFill" />
              </view>
              <!-- <view class="title">{{ item.title }}</view> -->
            </view>
          </swiper-item>
        </swiper>

        <view class="dot-list">
          <view
            v-for="(item, i) in classifyList"
            :key="i"
            class="dot-list-item"
            :class="{
              act: i == classCur
            }"
          ></view>
        </view>
      </template>


      

      <view class="list-title">
        <view class="list-title-l">
          <view class="icon">
            <cimage src="/static/icon/bao_zhang.png" mode="scaleToFill" />
          </view>
          一番赏
        </view>

        <view
          
        >
          <text class="btn btn1">更多></text>
        </view>
      </view>

		<view class="box_wrap">
		<view
		  v-for="(item, i) of cardList" :key="i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		<view
		  v-for="(item, i) of cardList" :key="4+i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		</view>
      <view class="list-title">
        <view class="list-title-l">
          <view class="icon">
            <cimage src="/static/icon/bao_zhang.png" mode="scaleToFill" />
          </view>
          萌萌哒
        </view>

        <view
          
        >
          <text class="btn btn1">更多></text>
        </view>
      </view>

		<view class="box_wrap">
		<view
		  v-for="(item, i) of cardList" :key="i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		<view
		  v-for="(item, i) of cardList" :key="4+i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		</view>
      <view class="list-title">
        <view class="list-title-l">
          <view class="icon">
            <cimage src="/static/icon/bao_zhang.png" mode="scaleToFill" />
          </view>
          恰谷谷
        </view>

        <view
          
        >
          <text class="btn btn1">更多></text>
        </view>
      </view>

		<view class="box_wrap">
		<view
		  v-for="(item, i) of cardList" :key="i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		<view
		  v-for="(item, i) of cardList" :key="4+i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		</view>
      <view class="list-title">
        <view class="list-title-l">
          <view class="icon">
            <cimage src="/static/icon/bao_zhang.png" mode="scaleToFill" />
          </view>
          单品
        </view>

        <view
          
        >
          <text class="btn btn1">更多></text>
        </view>
      </view>

		<view class="box_wrap">
		<view
		  v-for="(item, i) of cardList" :key="i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		<view
		  v-for="(item, i) of cardList" :key="4+i"
		  class="item"
		>
		  <view class="item-pic">
		    <cimage :src="item.thumb" mode="scaleToFill" />
		  </view>
		</view>
		</view>
      <view class="goods-list">
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: false,
        page: {
          size: 20 // 每页数据的数量,默认10
        }
      },
      listData: [],
      classCur: 0,
      swiperList: [],
      cardList: [],
      classifyList: [],
      // bannerList: [{thumb:'折扣2',title:'折扣2'}'折扣2','折扣3','折扣4','折扣5','折扣6']
    }
  },

  computed: {
    ...mapGetters(['sysConfig'])
  },

  onShareAppMessage() {
    return {
      title: `开盲盒 赢好礼!`,
      // imageUrl: this.pageData.box.thumb,
      path: `/pages/index/index`
    }
  },

  onLoad(options) {},

  onReady() {
    this.downCallback()
  },

  methods: {
    /**
     * @description: 商城详情
     * @param {*} item
     * @return {*}
     */
    toMallDetail(item) {
      this.$common.to({
        url: '/package/mall/mall-detail',
        query: {
          id: item.id
        }
      })
    },

    /**
     * @description: 获取分类列表
     * @return {*}
     */
    getClassify() {
      this.req({
        url: '/v1/shop/cat',
        data: {},
        Loading: true,
        success: res => {
          if (res.code == 200) {
            if (res.data.length > 0) {
              let arr = []

              res.data.map((item, i) => {
                /* 计算要放入数据的数组下标 */
                let idx = Math.floor(i / 5)
                console.log(idx)
                /* 如果不存在该数组,创建空数组 */
                if (!arr[idx]) {
                  arr[idx] = []
                }
                /* 向数组中放入数据 */
                arr[idx].push(item)
              })

              this.classifyList = arr

              console.log(arr)
            }
          }
        }
      })
    },

    /**
     * @description: 下拉刷新
     * @return {*}
     */
    async downCallback() {
      /* 获取轮播图 */
      this.$common.getBanner(1).then(res => {
        this.swiperList = res
      })
      /* 获取分类 */
      this.getClassify()
      /* 获取分类下方卡片列表 */
      this.$common.getBanner(2).then(res => {
        this.cardList = res
      })

      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    /**
     * @description: 获取商品列表数据
     * @param {*}
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: '/v1/shop/list',
        data: {
          page: num,
          per_page: size
        },
        Loading: true,
        success: res => {
          if (res.code == 200) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = [...this.listData, ...res.data.data]
            this.mescroll.endBySize(res.data.data.length, res.data.total)
          }
        }
      })
    },

    /**
     * @description: 前往分类详情页面
     * @return {*}
     */
    toClassify(item) {
      console.log(item)
      this.$common.to({
        type: 1,
        url: '/package/index/classify-detail',
        query: {
          catId: item.id
        }
      })
    },

    /**
     * @description: 商品分类页面切换
     * @param {*} e
     * @return {*}
     */
    classChange(e) {
      console.log(e)
      this.classCur = e.detail.current
    }
  }
}
</script>

<style lang="scss">
.page-wrap {
  min-height: 100vh;
  background-size: 100% auto;
  background-color: #f4f7fe;

  .status-bar {
    // background: #fff;
    background-size: 100% auto;
    position: fixed;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
  }

  &-header {
    height: 88rpx;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    // background: #fff;
    background-size: 100% auto;
    position: fixed;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;

    .input-box {
      border-radius: 999rpx;
      background: #f6f5f5;
      width: 400rpx;
      height: 56rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #b2b2b2;

      .icon {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
.f-r{
	float: right
}
.f-l{
	float: left;
}
.f-c{
	display: inline;
.btn2{
	font-size: 24px}
}
.btn2{
	background-color: #eb989c;
	color: #fff;
	font-size: 22px;
	width: 60px;
	height: 60px;
	padding: 10px;
	margin: 5px;
	line-height: 80px;
	border-radius: 50%;
}
  .banner {
    width: 100%;
    height: 280rpx;
    margin: 30rpx auto 0;

    swiper-item {
      display: flex;
      justify-content: center;

      .swiper-pic {
        width: 690rpx;
        height: 100%;
        border-radius: 10rpx;
        overflow: hidden;
      }
    }
  }
  .btn_wrap{
	  padding: 10px 17px 0px 17px;
	  margin-bottom: -8px;
  }
.btn{
	width: 100rpx;
	height: 40rpx;
	background: #333333;
	color: #f4f7fe;
	font-size: 20rpx;
	padding: 6rpx;
	margin-right: 5rpx;
}
.btn1{
	text-align: center;
}
.box_wrap{
	  width: 100%;
	  height: 300rpx;
	  margin: 20rpx 0;
      padding: 0 30rpx;
      box-sizing: border-box;
      .item {
		  display: inline-flex;
        width: 156rpx;
		margin: 0 5px;

        &-pic {
          width: 100%;
          height: 156rpx;
        }}
}
  .classify {
    width: 100%;
    height: 150rpx;
    margin-top: 30rpx;

    swiper-item {
      box-sizing: border-box;
      padding: 0 30rpx;
      display: flex;

      .item {
        width: 206rpx;

        &-pic {
          width: 100%;
          height: 156rpx;
        }

        .title {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #051a2b;
          text-align: center;
          margin-top: 10rpx;
        }
      }

      .item + .item {
        margin-left: 40rpx;
      }
    }
  }

  .dot-list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30rpx;

    &-item {
      width: 10rpx;
      height: 10rpx;
      background: #e1e1e1;
      border-radius: 100rpx;
      margin: 0 4rpx;
      transition: all 0.3s;

      &.act {
        width: 20rpx;
        background: #000000;
      }
    }
  }

  .card-list {
    width: 690rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background: #fff;
    margin: 20rpx auto 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 1rpx 30rpx 30rpx;

    &-item {
      margin-top: 30rpx;
      width: 300rpx;
      height: 122rpx;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      box-sizing: border-box;
      padding-left: 15rpx;
      padding-right: 140rpx;

      .title {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #051a2b;
      }

      .desc {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #051a2b;
      }
    }
  }

  .list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
    padding: 0 30rpx;

    &-l {
      display: flex;
      align-items: center;

      .icon {
        width: 50rpx;
        height: 50rpx;
      }

      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    &-r {
      width: 382rpx;
      height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #2a4e6a;
      }

      text + text {
        margin-left: 20rpx;
      }
    }
  }

  .goods-list {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 30rpx 10rpx;

    &-col {
      &-item {
        width: 340rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background: #ffffff;
        margin-bottom: 30rpx;

        .pic {
          height: 340rpx;
        }

        .tag-list {
          padding: 1rpx 15rpx 0;
          display: flex;
          flex-flow: row wrap;

          &-item {
            border-radius: 5rpx;
            overflow: hidden;
            margin-right: 10rpx;
            margin-top: 10rpx;
            height: 40rpx;
            box-sizing: border-box;
            padding: 0 10rpx;
            display: flex;
            align-items: center;

            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #eb989c;
            border: 2rpx solid #eb989c;

            &.zheng {
              color: #fff;
              background: #333333;
              border-color: #333333;
            }
          }
        }

        .name {
          padding: 10rpx 15rpx;

          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .price-num {
          padding: 0 15rpx 10rpx;
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between;
          align-items: center;

          .price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;

            text {
              font-size: 32rpx;

              text {
                margin-left: 10rpx;
                font-size: 20rpx;
                font-family: PingFang SC;
                font-weight: 500;
                text-decoration: line-through;
                color: #999999;
              }
            }
          }

          .num {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
